<template>
	<div class="search">

		<div class="search_top flex side_center">
			<div class="search_top_l flex start_center">
				<i class="iconfont iconsearch icon-search1"></i>
				<input v-model="key" class="search_top_ipt" type="" name="" placeholder="请输入小伙伴姓名">
			</div>
			<button class="search_top_r" @click="getInfo">搜索</button>
		</div>

		<div class="search_main">

			<div class='list flex start_end' v-for="item in list" @click="toPartner(item.uuid,item.name)">
			  <div class='list_l'>
			    <img class='list_l_img' :src='item.imgs' alt=''>
			    <div class='list_l_star'>
					    	<i v-bind:class="[item.score>0?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[item.score>1?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[item.score>2?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[item.score>3?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[item.score>4?'iconfont star icon-star':'iconfont star icon-star5']"></i>
			    </div>
			  </div>
			  <div class='list_m'>
			    <div class='list_m_top flex first_center'>
			      <div class='list_m_name'>{{item.name}}</div>
			      <div class='list_m_score'>{{item.score}}分</div>
			    </div>
			    <div class='list_m_state'>未完成订单数量：{{item.unfinished_num}}</div>
			    <div class='flex first_center'>
			      <div class='list_m_serve'>服务:{{item.service_num}}次</div>
			      <div class='list_m_review'>点评:{{item.review_num}}</div>
			    </div>
			  </div>
			  <div class='list_r'>
			    <p class='list_r_long'>距离:{{item.distance}}km</p>
			    <button class="list_r_btn" @click.stop="toConfirm(item.id,item.name,item.mobile,item.uid)">预约</button>
			  </div>
			</div>

		</div>

	</div>
</template>

<script>
import axios from 'axios'
import global from '../../../utils/global'
import store from '../../../utils/store'
export default {
  name: 'Search',
  data () {
    return {
      key: '',
      list: [],
      carLength: '',
      addrLength: '',
    }
  },
  beforeMount(){
  	this.key = this.$route.params.key;
  },
  mounted(){
  	this.getInfo();
    this.$root.share();
  },
  methods:{
    // 查看小伙伴详情
    toPartner(uuid,key){
      this.$router.push({
        name:'Partner',
        params: {
          uuid: uuid,
          key: key,
        }
      })
    },
    // 预约
  	toConfirm(id,name,phone,uid){
      var that = this;
      if (that.carLength == 0 || that.addrLength == 0) {
        alert("请先填写您的车辆及地址信息！");
      } else {
        axios.get(global.api.index.appoint,{
          params: {
            uuid: localStorage.getItem('carWashUuid'),
            uid: uid,
          }
        })
        .then(function(res){
          console.log("toConfirm then");
          console.log(res.data);
          if (res.data.data.code == 'success') {
            global.order.worker.id = id;
            global.order.worker.name = name;
            global.order.worker.phone = phone;
            global.order.first = true;
            that.$router.push({path:'/Confirm'})                  
          } else {
            alert(res.data.data.msg);
          }
        })
        .catch(function(res){
          console.log("toConfirm catch");
          console.log(res);
        })
      }
		},
    // 获取信息
    getInfo(){
      var that = this;
      axios.all([
        axios.get(global.api.index.search,{  //搜索
          params: {
            uuid: localStorage.getItem('carWashUuid'),
            key: that.key,
          }
        }),
        axios.get(global.api.carMine.car,{  //车子数量
          params: {
            uuid: localStorage.getItem('carWashUuid'),
          }
        }),
        axios.get(global.api.address.myAddress,{  //地址数量
          params: {
            uuid: localStorage.getItem('carWashUuid'),
          }
        }),
      ])
      .then(axios.spread(function(content,car,addr){
        console.log("getInfo then");
        console.log(content.data.data);
        console.log(car.data.data.length);
        console.log(addr.data.data.length);
        that.list = content.data.data;
        that.carLength = car.data.data.length;
        that.addrLength = addr.data.data.length;
      }))
      .catch(function(res){
        console.log(res);
      })
    }, 
  },
}
</script>

<style scoped>
	button:focus{
		outline-offset: 0px;
		outline: -webkit-focus-ring-color auto 0px;
	}
  /* 搜索 */
	.search{

	}
	.search_top{
		padding: 0.5rem 1rem;
		border-bottom: 1px solid #B3B3B4;
	}
	.search_top_l{
		-webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    background-color: #DDDDDD;
    height: 2rem;
    /*line-height: 2rem;*/
    border-radius: 1rem;
    padding-left: 0.5rem;
    justify-content: flex-start;
    align-items: center;
	}
	.iconsearch{
		font-size: 1.2rem;
		margin-right: 0.3rem;
	}
	.search_top_ipt{
		margin: 0;
		padding: 0;
		border: none;
		height: 2rem;
		background-color: #DDDDDD;
		font-size: 0.9rem;
	}
	.search_top_ipt:focus{
		outline-offset: 0px;
		outline: -webkit-focus-ring-color auto 0px;
	}
	.search_top_r{
		margin: 0;
		padding: 0;
		width: 4rem;
		height: 2rem;
		border: none;
		background-color: #fff;
		font-size: 1rem;
	}
	/* 列表 */
	.list{
		padding: 0.5rem;
		border-bottom: 1px solid #B3B3B4;
    box-shadow: 0 0.6rem 0 0 #E5E5E6;
    margin-bottom: 0.6rem;
	}
	.list_l{
		width: 23%;
	}
	.list_l_img{
		width: 55%;
		border-radius: 50%;
	}
	.list_l_star{
		display: -webkit-box;
    display: -webkit-flex;
    display: flex;
		justify-content: center;
		align-items: center;
	}
	.star{
		color: #2ecc80;
		font-size: 0.8rem;
	}
	.list_m{
		width: 53%;
	}
	.list_m_top{
		font-weight: bold;
	}
	.list_m_name{
		margin-right: 1rem;
	}
	.list_m_score{

	}
	.list_m_state{
		text-align: left;
		font-size: 0.9rem;
		padding: 0.3rem 0;
		color: #595757;
	}
	.list_m_serve{
		font-size: 0.8rem;
		color: #888888;
		margin-right: 0.5rem;
	}
	.list_m_review{
		font-size: 0.8rem;
		color: #888888;
	}
	.list_r{
		width: 25%;
	}
	.list_r_long{
		font-size: 0.85rem;
		color: #595757;
		margin-bottom: 0.4rem;
	}
	.list_r_btn{
		margin: 0;
		padding: 0;
		width: 4rem;
		height: 2.5rem;
		background-color: #2ecc80;
		color: #ffffff;
		font-size: 0.9rem;
		border-radius: 0.5rem;
		border: none;
	}
</style>
<style>
	ul,li,div,a,p,span{
		margin: 0;
		padding: 0;
	}
	li{
		list-style: none;
	}
	.flex{
		display: -webkit-box;
    display: -webkit-flex;
    display: flex;
	}
	.side_center{
		justify-content: space-between;
		align-items: center
	}
	.start_center{
		justify-content: flex-start;
		align-items:center;
	}
	.start_end{
		justify-content: flex-start;
		align-items: flex-end;
	}
</style>
